<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>HTML Forms</title>
<!-- metadata -->
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.1" />
<meta name="presdate" content="20050728" />
<meta name="author" content="Eric A. Meyer" />
<meta name="company" content="Complex Spiral Consulting" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
<!-- S5 JS -->
<script src="ui/default/slides.js" type="text/javascript"></script>
</head>
<body>

<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>Tri-C Web 2 Fall 2008</h1>
<h2>HTML Forms</h2>
</div>

</div><!-- closes div class="layout" -->

<div class="presentation">

<div class="slide">
<h1>Why use forms?</h1>
<ul>
<li>Allow people to search your site</li>
<li>Allow people to sign up for your mailing list</li>
</ul>
</div>

<div class="slide">
<h1>Very Simple Example</h1>

<ul>
<li><a href="form1.html">Open me in a separate window</a></li>
<li>action attribute tells where to send the collected data.</li>
<li>method tells HOW to send it.</li>
<li>name-value pairs are sent from each input.</li>
</ul>

</div>


<div class="slide">
<h1>What happens when we submit it?</h1>

<h2>/showsearchresults?search_term=Search+Here</h2>

<ul>
<li>The browser makes name-value pairs out of each input widget in the
form</li>
<li>The browser makes a request for the URL in the action
attribute.</li>
<li>If the method is GET, then the browser adds those name-value pairs
to the end of the URL with a question mark at the end.</li>
<li>This is called the QUERY STRING</li>
<li>If the method is POST, then the browser sends the name-value pairs
in a different part of the request called the body.</li>
</ul>

</div>

<div class="slide">
<h1>Forms with multiple inputs</h1>

<ul>
<li><a href="form2.html">Open me in a separate window</a></li>
<li>The order of the name-value pairs is unpredictable.</li>
</ul>

<p>
/showsearchresults?first_name=matt&amp;last_name=wilson
</p>

</div>

<div class="slide">
<h1>Checkboxes</h1>

<ul>
<li><a href="form3.html">Open me in a separate window</a></li>
<li>Every checkbox has the same name, but different values</li>
<li>So you can choose many things</li>
<li>On submission, they all get sent</li>
</ul>

<p>/ordersushi?order=mackerel&amp;order=tuna</p>

<p>Once again, the order of the name-value pairs doesn't really matter.</p>

</div>

<div class="slide">
<h1>Radio buttons</h1>
<ul>
<li><a href="form4.html">Open me in a separate window</a></li>
<li>Radio buttons restrict choices to a single value for each name</li>
<li>You can have numerous lists of radio buttons in your form</li>
</ul>
</div>

<div class="slide">
<h1>Other tags</h1>
<ul>
<li>labels</li>
<li>legends</li>
<li>fieldsets</li>
<li>textareas</li>
<li>file uploads</li>
</ul>
</div>

<div class="slide">
<h1>POST versus GET</h1>
<p>What's the difference between these two requests:</p>
<ul>
<li>Tell me what is on the grocery list.</li>
<li>Add bananas to the grocery list.</li>
</ul>

<p>The first request doesn't alter the grocery list.  After you do what
I asked, the grocery list is the same.</p>

<p>The second request alters the grocery list. If you repeat this
request, we might end up with bananas on the grocery list twice.</p>
</div>

<div class="slide">
<h1>The assignment</h1>

<a href="assignment.txt">HERE IT IS</a>

</div>

</div><!-- closes div class="presentation" -->

</body>
</html>
